<template>
  <CommonCard title="今日订单量" :value="moneyFormater(orderToday)">
    <div ref="lineChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div>昨日订单量<span class="emphasis">￥{{numberFormater (orderLastDay) }}</span></div>
    </template>
  </CommonCard>
</template>
 <script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TodayOrders",
});
</script>
 <script lang="ts" setup>
import { ref, onMounted ,computed,watch} from "vue";
import * as echarts from "echarts";
import { useReportDataStore } from "@/stores/reportData";
import type { EChartsType } from "echarts";
import useFormater from "@/hooks/useFormater";
import CommonCard from "./CommonCard.vue";
const {moneyFormater,numberFormater} = useFormater()
const reportDataStore = useReportDataStore()
const orderToday = computed(()=>reportDataStore.reportData.orderToday)
//昨日订单量
const orderLastDay = computed(()=>reportDataStore.reportData.orderLastDay)
//x轴数据
const xZhou = computed(()=>reportDataStore.reportData.orderTrendAxis)
//y轴数据
const yZhou = computed(()=>reportDataStore.reportData.orderTrend)


const lineChartRef = ref();
let chart: EChartsType;

const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false,
      // data: [
      //   "一月",
      //   "二月",
      //   "三月",
      //   "四月",
      //   "五月",
      //   "六月",
      //   "七月",
      //   "八月",
      //   "九月",
      //   "十月",
      //   "十一月",
      //   "十二月",
      // ],
      data:xZhou.value
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        name: "实时订单数",
        type: "line",
        // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        data:yZhou.value,
        smooth: true,
        areaStyle: {
          color: "purple",
        },
        itemStyle: {
          opacity: 0,
        },
        lineStyle: {
          opacity: 0,
        },
      },
    ],
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    tooltip: {},
  };
};
onMounted(() => {
  chart = echarts.init(lineChartRef.value);
  
  window.addEventListener("resize", () => {
    chart && chart.resize();
  });
});
watch(yZhou,()=>{
  //当页面中计算属性里面有了数据之后 再来渲染页面图形
  chart&&chart.setOption(getOption());
})
</script>
 
 <style scoped>
</style>